<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="add()">添加</button>
		<button type="button" onclick="del()">删除</button>
		<button type="button" onclick="query()">查看本地</button>
		<script type="text/javascript">
			let books = [{
					id: 1,
					name: 'Java从入门到放弃',
					price: 80,
					tdate: '2020-07-01',
					count: 1
				},
				{
					id: 2,
					name: 'Vue从入门到放弃',
					price: 90,
					tdate: '2020-07-02',
					count: 1
				},
				{
					id: 3,
					name: 'Mysql从入门到放弃',
					price: 100.01,
					tdate: '2020-07-03',
					count: 1
				},
				{
					id: 4,
					name: '啥都从入门到放弃',
					price: 70.00,
					tdate: '2020-07-04',
					count: 1
				},
			];
			
			/**
			 * 	html存储
			 * 		会话存储：sessionStorage，只要浏览器一关闭，就会消失
			 * 		本地存储：localStorage，浏览器关闭也不会消失
			 * 					setItem(key, value)
			 * 					getItem(key)
				JSON格式化处理
					JSON.stringify(对象)：将对象变为json格式的字符串
					JSON.parse(json格式的字符串)：json格式的字符串转换为json对象
						如果不是json格式的字符串，则无法转换
			 */
			
			localStorage
			function add() {
				books.push({id: 5, name: "javaScript", tdate: "2020-07-04", count: 1})
				// localStorage.setItem("data", books);//放对象会有问题
				//针对对象，需要做转化处理，JSON.stringify(books)，格式为json数据格式
				//JSON.stringify(books)：json格式化
				localStorage.setItem("data", JSON.stringify(books));
				sessionStorage.setItem("data", JSON.stringify(books));
			}
			
			function del() {
				
			}
			
			function query() {
				let data = localStorage.getItem("data", books);
				let data_s = sessionStorage.getItem("data", books);
				console.log(data_s);
				// console.log(typeof data);//string类型
				// for(let item of data) {
				// 	console.log(item);
				// }
				//json解析
				let json = JSON.parse(data);
				console.log(json);
				console.log(typeof json);//string类型
				for(let item of json) {
					console.log(item);
				}
			}
		</script>
	</body>
</html>
